// 采用 IIFE 来封装我们的操作
// 是为了避免对`global object`的污染
(g =>{

    class KaifamiaoElement {
        htmlElement = null;
        constructor(htmlElement) {
            this.htmlElement = htmlElement;
        }
        // KaifamiaoElement.prototype.on
        on(name, handler, capture = false) {
            // 若 this.htmlElement 存在并且是个元素
            if( this.htmlElement && this.htmlElement.nodeType === Node.ELEMENT_NODE ){
                // 为 htmlElement 绑定事件监听器
                this.htmlElement.addEventListener(name, handler, capture);
            }
        }
        click(handler, capture = false){
            this.on('click', handler, capture);
        }
        dblclick(handler, capture = false){
            this.on('dblclick', handler, capture);
        }
        // KaifamiaoElement.prototype.once
        once(name, handler, capture = false){
            if( this.htmlElement && this.htmlElement.nodeType === Node.ELEMENT_NODE ){
                let options = {
                    capture, // 可以将`capture: capture` 缩写为 `capture`
                    once: true
                }
                this.htmlElement.addEventListener(name, handler, options);
            }
        }
        // KaifamiaoElement.prototype.off
        off(name, handler, capture = false) {
            if( this.htmlElement && this.htmlElement.nodeType === Node.ELEMENT_NODE ){
                this.htmlElement.removeEventListener(name, handler, capture);
            }
        } 
    }

    let X = function(cssSelector){
        // 调用Document.prototype.querySelector方法获取匹配指定CSS选择器的首个元素
        let he = document.querySelector(cssSelector);
        let ke = new KaifamiaoElement(he);
        return ke;
    }

    g.$ = X;

})( window );